import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TranslateService, TranslatePipe } from '@ngx-translate/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';

/**
 * 翻译演示组件
 * 展示从 locale-zh_CN.json 和 locale-en_US.json 提取的所有翻译特性
 */
@Component({
  selector: 'cne-i18n-guide',
  standalone: true,
  imports: [CommonModule, TranslatePipe, MatButtonModule],
  templateUrl: './i18n-guide.component.html',
  styleUrl: './i18n-guide.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class I18nGuideComponent {
  currentLang: string = 'zh_CN';

  // 代码示例数据 - 使用纯文本避免解析错误
  codeExamples = {
    basicHtml: '<p>{{ \'access.unauthorized\' | translate }}</p>\n<p>{{ \'action.save\' | translate }}</p>',
    
    interpolationHtml: '<p>{{ \'action.share-via\' | translate: {provider: \'微信\'} }}</p>\n<p>{{ \'common.phone-input-pattern\' | translate: {phoneNumber: \'+8613800138000\'} }}</p>',
    
    interpolationJson: '{\n  "action.share-via": "通过 {{provider}} 分享",\n  "common.phone-input-pattern": "请输入手机号：{{phoneNumber}}"\n}',
    
    nestedHtml: '<p>{{ \'admin.device-connectivity.mqtt.mqtt-broker\' | translate }}</p>\n<p>{{ \'alarm.search-status.active\' | translate }}</p>',
    
    nestedJson: '{\n  "admin": {\n    "device-connectivity": {\n      "mqtt": {\n        "mqtt-broker": "MQTT 代理服务器"\n      }\n    }\n  },\n  "alarm": {\n    "search-status": {\n      "active": "活跃状态"\n    }\n  }\n}',
    
    htmlSupportHtml: '<p [innerHTML]="\'common.html-message\' | translate"></p>\n<p [innerHTML]="\'common.duplicate-alias-error\' | translate: {alias: \'device-001\'}"></p>',
    
    htmlSupportJson: '{\n  "common.html-message": "这是一个<strong>重要</strong>的消息",\n  "common.duplicate-alias-error": "设备 <code>{{alias}}</code> 已存在"\n}',
    
    pluralHtml: '<p>{{ \'alarm.selected-alarms\' | translate: {count: 1} }}</p>\n<p>{{ \'alarm.selected-alarms\' | translate: {count: 5} }}</p>\n<p>{{ \'alarm.selected-alarms\' | translate: {count: 0} }}</p>',
    
    pluralJson: '{\n  "alarm.selected-alarms": "已选择 {{count}} 个告警"\n}',
    
    complexHtml: '<p [innerHTML]="\'common.public-dashboard-text\' | translate: {dashboardTitle: \'我的仪表板\', publicLink: \'https://example.com\'}"></p>\n<p [innerHTML]="\'alarm.create-alarm-pattern\' | translate: {alarmType: \'温度告警\'}"></p>',
    
    complexJson: '{\n  "common.public-dashboard-text": "仪表板 <strong>{{dashboardTitle}}</strong> 已公开，链接：<a href=\'{{publicLink}}\'>{{publicLink}}</a>",\n  "alarm.create-alarm-pattern": "创建 <span class=\'alarm-type\'>{{alarmType}}</span> 告警规则"\n}',
    
    specialCharsHtml: '<p>{{ \'common.quotes-and-special-chars\' | translate }}</p>',
    
    specialCharsJson: '{\n  "common.quotes-and-special-chars": "特殊字符：\\"引号\\" \'单引号\' <标签> & 符号"\n}',
    
    linkHtml: '<p [innerHTML]="\'common.activation-link-text\' | translate: {activationLink: \'https://example.com/activate\'}"></p>',
    
    linkJson: '{\n  "common.activation-link-text": "请点击 <a href=\'{{activationLink}}\' target=\'_blank\'>激活链接</a> 完成注册"\n}',
    
    codeExampleHtml: '<div [innerHTML]="\'common.content-before\' | translate"></div>',
    
    codeExampleJson: '{\n  "common.content-before": "<pre><code>function example() {<br>  console.log(\'Hello World\');<br>}</code></pre>"\n}',
    
    missingHtml: '<p>{{ \'non-existent-key\' | translate }}</p>',
    
    missingComment: '// 当翻译键不存在时，ngx-translate 会显示键名本身\n// 这有助于开发时发现缺失的翻译'
  };

  constructor(private translate: TranslateService) {
    this.currentLang = this.translate.currentLang || 'zh_CN';
  }

  /**
   * 切换语言
   */
  switchLanguage(lang: string): void {
    this.translate.use(lang);
    this.currentLang = lang;
  }
}